<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>upload</title>
  <!-- 组件样式（全部的） -->
  <link rel="stylesheet" href="../../dist/tdesign.css">
  <!--
    TDesign 图标库，桌面端与移动端用同样的资源
    使用方式：<i class="t-icon t-icon-delete"></i>
  -->
  <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">
</head>
<body>
  <div class="tdesign-demo-wrap">
    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Upload</h1>
      <p class="tdesign-demo-wrap__info">开发者：catren</p>
      <p class="tdesign-demo-wrap__info">创建日期：2020-06-21</p>
      <p class="tdesign-demo-wrap__info">说明：TDesign upload 组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->

    <!-- 默认样式 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">上传组件</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">
        <h4>1.1 基础控件</h4>
        <div class="tdesign-demo-upload tdesign-demo-upload__column">
          <div class="t-button t-button--line">
            <i class="t-icon t-icon-upload"></i>
            <span>上传文件</span>
          </div>
          <div class="tdesign-demo-upload-tip">请上传txt文件，大小在60M以内</div>
        </div>

        <h4>1.2 展示文件列表</h4>
        <div class="tdesign-demo-upload">
          <div class="t-button t-button--line">
            <i class="t-icon t-icon-upload"></i>
            <span>上传文件</span>
          </div>

          <ul class="t-upload-list">
            <li class="t-upload__list-item">
              <div class="t-upload__list-content">
                <div class="t-upload__list-file">
                  <img class="t-upload__list-img" src="https://www.tencent.com/data/index/index_detail_1.jpg" alt="alt">
                </div>
                <div class="t-upload__list-name">文件名文件名文件名文件名文件名文件名文件名文件名.png</div>
              </div>

              <div class="t-upload-list__control">
                <i class="t-icon t-icon-delete"></i>
              </div>
            </li>

            <li class="t-upload__list-item">
              <div class="t-upload__list-content">
                <div class="t-upload__list-file">
                  <i class="t-icon t-icon-loading"></i>
                </div>
                <div class="t-upload__list-name">文件名文件名.ext</div>
              </div>

              <div class="t-upload-list__control">
                <i class="t-icon t-icon-delete"></i>
              </div>
            </li>

            <li class="t-upload__list-item">
              <div class="t-upload__list-content">
                <div class="t-upload__list-file">
                  <i class="t-icon t-icon-file"></i>
                </div>
                <div class="t-upload__list-name">文件名文件名.ext</div>
              </div>

              <div class="t-upload-list__control">
                <i class="t-icon t-icon-delete"></i>
              </div>
            </li>

            <li class="t-upload__list-item t-is--error">
              <div class="t-upload__list-content">
                <div class="t-upload__list-file">
                  <i class="t-icon t-icon-file"></i>
                </div>
                <div class="t-upload__list-name">文件名文件名.ext</div>
              </div>

              <div class="t-upload-list__control">
                <i class="t-icon t-icon-delete"></i>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="tdesign-demo-item__body">
        <h4>1.2 照片墙</h4>
        <ul class="t-upload">
          <li class="t-upload__item">
            <div class="t-upload-container">
              <div class="t-upload__content">
                <img class="t-upload__image" src="https://www.tencent.com/data/index/index_detail_1.jpg" alt="alt">
                <div class="t-upload__mask">
                  <span class="t-upload__mask__item">
                    <i class="t-icon t-icon-browse"></i>
                  </span>
                  <span class="t-upload__mask__item">
                    <i class="t-icon t-icon-delete"></i>
                  </span>
                </div>
              </div>
              <p class="t-upload__name">文件名.jpg</p>
            </div>
          </li>
          <li class="t-upload__item">
            <div class="t-upload-container">
              <i class="t-icon t-icon-loading"></i>
              <p class="t-upload__status">上传中40%</p>
              <p class="t-upload__name">文件名.jpg</p>
            </div>
          </li>
          <li class="t-upload__item t-is--error">
            <div class="t-upload-container">
              <i class="t-icon t-icon-warning_fill"></i>
              <p class="t-upload__status">上传出错</p>
              <p class="t-upload__name">文件名.jpg</p>
            </div>
          </li>
          <li class="t-upload__item t-is--error">
            <div class="t-upload-container">
              <i class="t-icon t-icon-warning_fill"></i>
              <p class="t-upload__status">上传出错</p>
              <p class="t-upload__name">文件名.jpg</p>
              <div class="t-upload__mask">
                <span class="t-upload__mask__item t-is-disabled">
                  <i class="t-icon t-icon-browse"></i>
                </span>
                <span class="t-upload__mask__item">
                  <i class="t-icon t-icon-delete"></i>
                </span>
              </div>
            </div>
          </li>
          <li class="t-upload__item t-is--empty">
            <div class="t-upload-container">
              <i class="t-icon t-icon-add"></i>
              <p>点击上传图片</p>
            </div>
          </li>
        </ul>
      </div>

      <div class="tdesign-demo-item__body">
        <h4>1.2 拖拽上传</h4>
        <div class="t-upload--dragable">
          <span class="t-upload--dragable--highlight">点击上传</span>
          <span>&nbsp;&nbsp;/&nbsp;&nbsp;拖拽到次区域</span>
        </div>

        <h4>1.2 拖拽上传 Active</h4>
        <div class="t-upload--dragable t-is--active">
          <div class="t-upload--dragable-tip">释放鼠标</div>
        </div>
      </div>

      <div class="tdesign-demo-item__body">
        <h4>1.3 批量上传</h4>
        <section class="tdesign-demo-upload-multiple">
          <header class="tdesign-demo-upload-multiple-header">
            <button class="t-button t-button--line">选择文件</button>
            <span>支持批量上传，上传格式为txt文件</span>
          </header>
          <div class="tdesign-demo-upload-table">
            <div class="tdesign-demo-upload-table-header">
              <div class="tdesign-demo-upload-table__name">文件名</div>
              <div class="tdesign-demo-upload-table__size">大小</div>
              <div class="tdesign-demo-upload-table__status">状态</div>
              <div class="tdesign-demo-upload-table__operator">操作</div>
            </div>
            <div class="tdesign-demo-upload-table-item">
              <div class="tdesign-demo-upload-table__name">
                <span>文件名.txt</span>
              </div>
              <div class="tdesign-demo-upload-table__size">
                <span>40k</span>
              </div>
              <div class="tdesign-demo-upload-table__status tdesign-demo-upload-table__status--success">
                <i class="t-icon t-icon-success_fill"></i>
                <span>上传成功</span>
              </div>
              <div class="tdesign-demo-upload-table__operator">
                <button class="t-button t-button--link t-size-s">删除</button>
              </div>
            </div>
            <div class="tdesign-demo-upload-table-item">
              <div class="tdesign-demo-upload-table__name">
                <span>比较长长长长的文件名.txt</span>
              </div>
              <div class="tdesign-demo-upload-table__size">
                <span>40k</span>
              </div>
              <div class="tdesign-demo-upload-table__status tdesign-demo-upload-table__status--fail">
                <i class="t-icon t-icon-warning_fill"></i>
                <span>文件格式有误</span>
              </div>
              <div class="tdesign-demo-upload-table__operator">
                <button class="t-button t-button--link t-size-s">删除</button>
              </div>
            </div>
            <div class="tdesign-demo-upload-table-item">
              <div class="tdesign-demo-upload-table__name">
                <span>文件名.txt</span>
              </div>
              <div class="tdesign-demo-upload-table__size">
                <span>40k</span>
              </div>
              <div class="tdesign-demo-upload-table__status tdesign-demo-upload-table__status--loading">
                <i class="t-icon t-icon-loading"></i>
                <span>上传40%</span>
              </div>
              <div class="tdesign-demo-upload-table__operator">
                <button class="t-button t-button--link t-size-s">删除</button>
              </div>
            </div>
            <div class="tdesign-demo-upload-table-item">
              <div class="tdesign-demo-upload-table__name">
                <span>文件名.txt</span>
              </div>
              <div class="tdesign-demo-upload-table__size">
                <span>40k</span>
              </div>
              <div class="tdesign-demo-upload-table__status tdesign-demo-upload-table__status--pending">
                <i class="t-icon t-icon-help_fill"></i>
                <span>待上传</span>
              </div>
              <div class="tdesign-demo-upload-table__operator">
                <button class="t-button t-button--link t-size-s">删除</button>
              </div>
            </div>
          </div>

          <div class="tdesign-demo-upload-bottom">
            <button class="t-button t-button--line">取消</button>
            <button class="t-button t-button--primary">开始上传</button>
          </div>
        </section>

        <h4>1.3 批量上传 - 未上传状态</h4>
        <section class="tdesign-demo-upload-multiple">
          <header class="tdesign-demo-upload-multiple-header">
            <button class="t-button t-button--line">选择文件</button>
            <span>支持批量上传，上传格式为txt文件</span>
          </header>
          <div class="tdesign-demo-upload-table tdesign-demo-upload-table--empty">
            点击上方”选择文件按钮或将文件拖拽到此区域
          </div>
          <div class="tdesign-demo-upload-bottom">
            <button class="t-button t-button--line">取消</button>
            <button class="t-button t-button--primary">开始上传</button>
          </div>
        </section>

        <h4>1.3 批量上传 - 拖拽状态</h4>
        <section class="tdesign-demo-upload-multiple">
          <header class="tdesign-demo-upload-multiple-header">
            <button class="t-button t-button--line">选择文件</button>
            <span>支持批量上传，上传格式为txt文件</span>
          </header>
          <div class="tdesign-demo-upload-table tdesign-demo-upload-table--draging">
            释放鼠标
          </div>
          <div class="tdesign-demo-upload-bottom">
            <button class="t-button t-button--line">取消</button>
            <button class="t-button t-button--primary">开始上传</button>
          </div>
        </section>
      </div>
    </div>
  </div>
</body>
</html>
